<template>
    <div>
<!--        <div class="page-header">-->
<!--            <Row>-->
<!--                <Col span="5">-->
<!--                    <Input v-model="value14" placeholder="Enter something..." clearable style="width: 200px" />-->
<!--                </Col>-->
<!--                <Col span="5">-->
<!--                    <Input v-model="value14" placeholder="Enter something..." clearable style="width: 200px" />-->
<!--                </Col>-->
<!--                <Col span="4">-->
<!--                    <Button type="primary" class="lyx-mr10">查询</Button>-->
<!--                </Col>-->
<!--            </Row>-->
<!--        </div>-->
        <Modal v-model="modal3" title="添加指导" @on-ok="modal2 = false" @on-cancel="modal2 = false" width="60">
            <div class="detail">
                <Form :model="formItem" :label-width="200">
                    <FormItem label="指导名称">
                        <Input v-model="formItem.name" placeholder="" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="创建年份">
                        <Select v-model="formItem.age" style="width:350px">
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="上传资料">
                        <Upload
                                multiple
                                action="http://txy.juyouhx.com/Api/Api/ObjectToOss/">
                            <Button icon="ios-cloud-upload-outline" type="primary">Upload files</Button>
                        </Upload>
                        <img src="" alt="">
                    </FormItem>
                </Form>
            </div>
            <div slot="footer" style="text-align: center">
                <Button type="warning" size="large" @click="ok1(model5)">保存</Button>
            </div>
        </Modal>
       <div> <Button type="primary" style="margin-left: 850px;width: 150px;height: 40px" @click="add()">添加指导</Button></div>
        <div class="page-content" style="margin-top: 20px">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change="tableSelectChange"></Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                    <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="totalnum" show-total />
                </Col>
            </Row>
        </div>
        <Modal v-model="modal1" title="项目详情" @on-ok="modal1 = false" @on-cancel="modal1 = false" width="60">
            <div class="detail">
                <Row class="p10">
                    <Col span="12">
                        <span class="bold">项目名称:</span>
                        <span>{{dataInfo.name}}</span>
                    </Col>
                    <Col span="10">
                        <span class="bold">参评社会组织性质:</span>
                        <span>{{dataInfo.organizations}}</span>
                    </Col>
                </Row>
                <Row class="p10">
                    <Col span="12">
                        <span class="bold">评估年度:</span>
                        <span>{{dataInfo.year}}</span>
                    </Col>
                    <Col span="10">
                        <span class="bold">评估申请截止时间:</span>
                        <span>{{dataInfo.end_time}}</span>
                    </Col>
                </Row>
            </div>
            <div slot="footer">
                <Button type="primary" size="large"   @click="modal1 = false">确定</Button>
            </div>
        </Modal>
        <Modal v-model="modal2" title="项目申报" @on-ok="modal2 = false" @on-cancel="modal2 = false" width="60">
            <div class="detail">
                <Form :model="formItem" :label-width="200">
                    <FormItem label="申报标题">
                        <Input v-model="formItem.title" placeholder="申报标题" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="申报内容">
                        <Input v-model="formItem.content" type="textarea" :rows="5" placeholder="申报内容" style="width: 60%"></Input>
                    </FormItem>
                    <FormItem label="申报内容">
                        <Upload
                                multiple
                                action="http://txy.juyouhx.com/Api/Api/ObjectToOss/">
                            <Button icon="ios-cloud-upload-outline">Upload files</Button>
                        </Upload>
                        <img src="" alt="">
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" size="large"   @click="ok(formItem)">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false,
      modal2: false,
      modal3: false,
      totalnum: 4,
      model4: '',
      model5: '',
      dataInfo: {},
      cityList: [
        {
          value: '2016',
          label: '2016'
        },
        {
          value: '2017',
          label: '2017'
        },
        {
          value: '2018',
          label: '2018'
        },
        {
          value: '2019',
          label: '2019'
        }

      ],
      formItem: {
        title: '',
        content: ''
      },
      columns4: [
        {
          title: '年份',
          key: 'age'
        },
        {
          title: '指导名称',
          key: 'name'
        },
        {
          title: '指导状态',
          key: 'statu'
        },

        {
          title: '操作',
          key: 'age',
          width: 200,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  display: params.row.statu === '主管领导通过审核' ? 'none' : params.row.statu === '待审核' ? 'none' : 'inline'
                },
                on: {
                  click: () => {
                    this.modal2 = true
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  display: params.row.statu === '主管领导通过审核' ? 'none' : params.row.statu === '待审核' ? 'none' : 'inline'
                },
                on: {
                  click: () => {
                  //  this.modal1 = true
                    this.dataInfo = params.row
                    params.row.statu = '待审核'
                    this.data1[params.row.index].statu = '待审核'
                    console.log(params.row.statu)
                  }
                }
              }, '提交'),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },

                style: {
                  marginRight: '5px',
                  display: params.row.statu === '主管领导通过审核' ? 'inline' : params.row.statu === '待审核' ? 'inline' : 'none'
                },
                on: {
                  click: () => {
                    this.modal1 = true
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },

                style: {
                  display: params.row.statu === '待审核' ? 'inline' : 'none'
                },
                on: {
                  click: () => {

                  }
                }
              }, '下线')
            ])
          }
        }
      ],
      data1: [
        {
          id: 11,
          age: '2019年',
          name: ' 临终咨询',
          statu: '草稿',
          end_time: '2016-10-03'
        },
        {
          age: '2019年',
          name: '礼仪服务',
          statu: '草稿',
          end_time: '2016-10-01'
        },
        {
          age: '2019年',
          name: '安葬流程指导',
          statu: '草稿',
          end_time: '2016-10-02'
        },
        {
          age: '2019年',
          name: '临终关怀',
          statu: '主管领导通过审核',
          end_time: '2016-10-04'
        }
      ]
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      console.log(selection)
    },
    delSelect () {

    },
    add () {
      this.modal3 = true
    },
    ok () {
      console.log(this.formItem)
      if (!this.formItem.title) {
        alert('申报标题不能为空')
        return
      }
      if (!this.formItem.content) {
        alert('申报内容不能为空')
        return
      }
      alert('申报成功')
      this.modal2 = false
    },
    ok1 () {
      console.log(this.formItem)
      this.formItem.statu = '草稿'
      if (!this.formItem.name) {
        alert('指导名称不能为空')
        return
      }
      if (!this.formItem.age) {
        alert('创建年份')
        return
      }
      alert('添加成功')
      this.modal3 = false
      this.totalnum = this.totalnum + 1
      this.data1.push(this.formItem)
    }
  }
}
</script>

<style scoped>
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
</style>
